<template>
  <aside class="os-navbar">
    <div class="os-navbar--subs">
      <!-- <div class="os-navbar__title"><i class="iconfont icon-zujian"></i>组件</div> -->
      <div class="os-navbar__sub-item"
           v-for="i in items"
           :key="i.name"
           :class="i.value === currentActive ? 'is-active': ''">
        <div class="os-navbar__text"
             @click="handleClick(i.value)">
          <i v-if="i.icon"
             :class="`iconfont ${i.icon}`"></i>
          {{i.name}}
        </div>
      </div>
    </div>
  </aside>
</template>
<script lang="ts">
  import { computed, defineComponent, onMounted } from 'vue'
  import { ElAside } from 'element-plus'
  import { useStore } from 'vuex'
  import { useRoute } from 'vue-router'
  import { MenuType } from './type'
  export default defineComponent({
    components: {
      'os-aside': ElAside,
    },
    setup() {
      const store = useStore()
      const route = useRoute()

      const items = computed(() => {
        const type: string = route.path.split('/')[1]
        const arrs: MenuType[] = store.getters[`${type}NavebarList`] || []
        store.commit('setShowNavbar', !!arrs.length && document.body.clientWidth >= 500)
        return arrs
      })
      const currentActive = computed(() => {
        return store.getters.getCurrentSection
      })
      // 锚点滚动
      const handleClick = (val: any) => {
        document.querySelector(`#section-${val.replace(/\//g, '')}`)?.scrollIntoView({ behavior: 'smooth' })
        store.commit('setCurrentSection', val)
      }

      onMounted(() => {
        if (items.value.length) {
          store.commit('setCurrentSection', items.value[0].value)
        }
      })
      return {
        items,
        currentActive,
        handleClick,
      }
    },
  })
</script>
<style lang="scss" scoped>
  @include b(navbar) {
    position: fixed;
    width: 200px;
    top: 49px;
    left: 0;
    bottom: 0;
    box-shadow: 4px -2px 10px -3px $--color-bxs;
    overflow: auto;
    @include m(subs) {
      padding: 0.4rem;
    }
    @include e(title) {
      font-size: 14px;
      font-weight: 700;
      i {
        margin-right: 8px;
      }
    }
    @include e(sub-item) {
      display: flex;
      align-items: center;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #fff;
      transition: transform 0.2s ease-in;
      cursor: pointer;
      &:hover {
        box-shadow: 1px 3px 10px 0px $--color-jb5, 0px 2px 25px 0px $--color-jb5 inset;
        color: $--color-hover;
      }
      @include when(active) {
        color: $--color-hover;
      }
    }
    @include e(text) {
      height: 100%;
      width: 100%;
      padding-left: 40px;
      font-size: inherit;
      color: inherit;
      letter-spacing: 1.2px;
      transition: color 0.3s ease-out;
    }
  }
  @include scrollbar;
</style>